<template>
	<view class="content">
		<u-subsection :list="list" :current="current" active-color="#2b85e4" @change="getOppoList"></u-subsection>
		<view style="height: calc(100% - 170rpx);overflow-y: scroll;">
			<u-card :title="item.empName" sub-title="2025-05-20 12:00:00" v-for="(item,index) of compPerfList" :key="index">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">
							<view>客户数量：{{item.cusNums}}</view>
							<view>订单数量：{{item.orderNum}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>发货金额：{{item.sumSaleAmt}}</view>
						</view>
					</view>
				</view>
			</u-card>
			<u-empty text="暂无业绩" mode="list" v-if="compPerfList.length === 0"></u-empty>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="footer">
			<u-button type="primary" @click="gotoDetail('add')">新建商机</u-button>
		</view> -->
		<u-select v-model="ctrlShow" :list="ctrlList" @confirm="ctrlConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sjList: [{}],
				ctrlShow: false,
				chooseSj: null,
				compPerfList: [],
				list: [
					{
						name: '本年'
					}, 
					{
						name: '本季'
					}, 
					{
						name: '本月'
					}
				],
				current: 2,
				ctrlList: [
					{
						value: '0',
						label: '转到公海'
					},
					{
						value: '1',
						label: '删除'
					},
					{
						value: '2',
						label: '下订单'
					},
					{
						value: '3',
						label: '转正式客户'
					}
				]
			};
		},
		onShow() {
			this.getOppoList(2);
		},
		methods: {
			gotoDetail(type,row){
				uni.setStorageSync('OppoDetail', row);
				uni.navigateTo({
					url: '/pages/busi/busi-detail?mode=' + type
				})
			},
			gotoGress(item){
				uni.navigateTo({
					url: '/pages/busi/progress?crmBusiOppo=' + item.id
				})
			},
			change(){
				
			},
			getOppoList(current){
				console.log(current);
				this.current = current;
				let begDate = "";
				if(this.current === 0){
					begDate = this.wfy.getYearStartDate();
					console.log(begDate);
				}
				if(this.current === 1){
					begDate = this.wfy.getQuarterStartDate();
				}
				if(this.current === 2){
					begDate = this.wfy.getMonthStartDate();
				}
				this.$api.user.getEmpPerf({
					begDate: begDate,
					status: "全部"
				}).then((res) => {
					console.log("res业绩",res);
					this.compPerfList = res;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		display: flex;
		height: 100rpx;
		margin-top: var(--status-bar-height);
		.right{
			width: 20%;
		}
		.center{
			width: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 40rpx;
		}
		.left{
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2b85e4;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.content{
		height: 100vh;
		overflow-y: scroll;
		
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0rpx;
		display: flex;
		flex-direction: column;
	}
	::v-deep .u-card__head--left__title{
		font-weight: bold !important;
		font-size: 32rpx !important;
	}
	.u-body-item-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		margin: 10rpx 0;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.foot{
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>
